<template>
  <div class="root">
    <div class="swiper" ref="swiper">
      <el-carousel ref="carouse" height="350px">
        <el-carousel-item v-for="item in 4" :key="item">
          <img src="@/assets/imgs/banner.png" alt="轮播图" style="-webkit-user-drag: none" />
        </el-carousel-item>
      </el-carousel>
      <!-- 搜索栏 -->
    </div>

    <searchHome></searchHome>

    <!-- 主要部分 -->

    <el-row :gutter="20" class="main">
      <!-- 左边医院信息 -->
      <el-col :span="18" class="left">
        <section class="font-1">医院</section>
        <SortBar
          title="等级"
          :list="[{ n: '三级甲等' }, { n: '三级乙等' }, { n: '二级甲等' }, { n: '二级乙等' }, { n: '一级甲等' }]"
          @sort-click="handleSortClickLevel"
        ></SortBar>
        <SortBar title="地区" :list="areaList" @sort-click="handleSortClickArea"></SortBar>

        <!-- 符合筛选的医院的卡牌信息-->
        <HospitalCard class="my-[30px]" :hosp-list="hospList"></HospitalCard>

        <!-- <i-ep-Edit /> -->

        <!-- 分页组件 -->
        <el-pagination
          class="flex justify-center"
          @current-change="changeCurrentPage"
          @size-change="changeSize"
          layout="prev, pager, next,sizes "
          :total="totalCounts"
          :page-sizes="[5, 10]"
        />
      </el-col>

      <!-- 右边的 -->
      <el-col :span="6" class="right font-1"
        ><div class="title sticky top-[90px]">
          <div class="top w-[100%] flex justify-between flex-wrap">
            <span class="font-extrabold">常见科室</span>
            <span>全部></span>
          </div>
          <div class="flex w-[90%] ml-[50%] translate-x-[-50%] justify-between flex-wrap">
            <div class="t mt-2 cursor-pointer w-[40%] hover:text-theme-color">神经内科</div>
            <div class="t mt-2 cursor-pointer w-[40%] hover:text-theme-color">神经内科</div>
            <div class="t mt-2 cursor-pointer w-[40%] hover:text-theme-color">神经内科</div>
            <div class="t mt-2 cursor-pointer w-[40%] hover:text-theme-color">神经内科</div>
            <div class="t mt-2 cursor-pointer w-[40%] hover:text-theme-color">神经内科</div>
          </div>

          <notify :list="[{ title: '哈哈哈addasddddddddddddddddddd' }]" title="最新通知">
            <!-- 插入图标 -->
            <template v-slot:icon>
              <i-ep-Watermelon />
            </template>
          </notify>

          <notify :list="[{ title: '哈哈哈addasddddddddddddddddddd' }]" title="停诊公告">
            <!-- 插入图标 -->
            <template v-slot:icon>
              <i-ep-CloseBold />
            </template>
          </notify></div
      ></el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// import type { CarouselInstance } from 'element-plus';
import { ElCarousel } from "element-plus";
import searchHome from "@/componets/Home/search.vue";

//自己组件
import { HospitalCard, SortBar, notify } from "@/componets/Home";
import { SassNumber } from "sass";

//api
// 医院列表数据
import { homeHotList } from "@/network/modules/Home.ts";

//types
import type { hospType } from "@/types/home.d.ts";

//json 地区数据
//@ts-ignore
import areaJson from "@/JSON/area.json";

import { deBounce } from "@/utils";

let areaObj = JSON.parse(JSON.stringify(areaJson));
console.log(areaObj, "arealist");

let areaList: any[] = [];

for (const key in areaObj) {
  areaList.push(areaObj[key]);
}

//医院列表 v-for渲染的额list 数组不能直接用reactive
let hospList = ref<Array<hospType>>([]);
//总条数
let totalCounts = ref<number>(0);
//分页参数
let offset: number = 1;
let limit: number = 10;

//筛选条件
let level: number | string = 0;
let areaCode: number | string = 0;

let loadListData = async (offset: number, limit: number) => {
  try {
    let res: { content: hospType[]; totalElements: number } = await homeHotList(offset, limit);

    if (!res) throw new Error("'医院数据res没有值");
    console.log("未进入", level, areaCode);

    //筛选等级
    if (level) {
      console.log("level", level);

      res.content = res.content.filter(item => item.param.hostypeString == level);
    }
    //筛选地区
    if (areaCode) {
      console.log("areaCode", areaCode + "00");
      res.content = res.content.filter(item => item.cityCode == areaCode + "00");
    }

    hospList.value = res.content;
    totalCounts.value = res.totalElements;
  } catch (error) {
    console.log("医院数据err", error);
  }
};

let deBounceLoad = deBounce(loadListData);

//加载数据
await loadListData(offset, limit);

//refs
const carouse = ref<InstanceType<typeof ElCarousel>>();

//当前是第几页事件？
const changeCurrentPage = (curent: number) => {
  offset = curent;
  loadListData(offset, limit);
};
//改变每页几个
const changeSize = async (size: number) => {
  console.log("size", size);

  limit = size;
  await loadListData(offset, limit);
};

//处理 sortbar的点击事件

//地区点击
const handleSortClickArea = async (payload: any) => {
  console.log("handleSortClickArea", payload);
  if (!payload) {
    areaCode = 0; //等级为0 不需要筛选
  } else {
    areaCode = payload.areaCode;
  }

  await deBounceLoad(offset, limit);
};

//等级点击
const handleSortClickLevel = async (payload: any) => {
  console.log("handleSortClickLevel", payload);
  if (!payload) {
    level = 0; //等级为0 不需要筛选
  } else {
    level = payload.n;
    await deBounceLoad(offset, limit);
  }
};

//hooks
onMounted(async () => {
  let startPoint = 0;
  let stopPoint = 0;
  let swiper = document.querySelector(".swiper");
  swiper!.addEventListener("mousedown", e => {
    //@ts-ignore
    startPoint = e.offsetX;
  });

  swiper!.addEventListener("mouseup", e => {
    //@ts-ignore
    stopPoint = e.offsetX;

    //左滑 下一张
    if (startPoint > stopPoint) {
      carouse.value?.next();
    } else if (startPoint < stopPoint) {
      //右滑 上一张
      carouse.value?.prev();
    }
  });
});
</script>

<style scoped lang="scss">
.root {
  margin: 0 auto;
  max-width: 1200px;
  min-height: 700px;
  margin-top: 70px;
  display: flex;
  flex-direction: column;

  align-items: center;
}
.swiper {
  width: 1200px;
  .el-carousel__item img {
    width: 100%;
  }
}
.main {
  width: 100%;
  min-height: 1500px;
  position: relative;
  .grid-content {
    min-height: 36px;
  }

  .right {
    position: sticky;
    top: 80px;
  }
}
</style>
